@header_height: 72px; // 标题高度
@header_main_widht: 1200px; // 标题主区域宽度

@background_normol: transparent; // 未激活时标题颜色-透明
@background_hover: #212230; // 激活后标题颜色
@logo_size: 50px; // 图片大小
@item_root_width: 104px; // 导航宽度
@item_li_height: 50px; // 子导航高度
#header_root {
  height: @header_height;
  width: 100vw;
  min-width: @header_main_widht;
  background-color: @background_normol;
  transition: .5s ease-in-out;
  position: fixed;
  top: 0;
  z-index: 99;

  &:hover {
    background-color: @background_hover;
  }

  > .header_main {
    width: @header_main_widht;
    margin: auto;
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .title_logo {
    margin-right: auto;

    img {
      width: @logo_size;
      height: @logo_size;
    }

    .logo_title {
      margin-left: 20px;
      font-size: 20px;
      color: white;
      font-weight: lighter;
    }
  }

  .title_content {
    height: @header_height;

    .item-root {
      margin-right: 10px;
      position: relative;
      height: 100%;
      line-height: @header_height;
      transition: 0.3s ease-in-out;
      width: @item_root_width;
      text-align: center;

      &:hover .ul-root {
        display: block;
        animation: open_nav 0.5s;
      }
      //width: 104px;
      a {
        font-size: 15px;
        padding: 0 10px;
        display: block;
        width: 100%;
        height: 100%;
      }

      .ul-root {
        position: absolute;
        display: none;
        > li {
          height: @item_li_height;
          line-height: @item_li_height;
          width: @item_root_width;

          background: #212230;
          transition: 0.3s ease-in-out;

          &:hover {
            background: #656fd7;
            border-bottom: 1px solid #ccc;
          }
        }
      }
    }

    #phone_img {
      margin-right: 10px;
      width: @logo_size - 20px;
      height: @logo_size - 20px;
    }

    .phone a {
      transition: all 2s ease-in-out;
      &:hover {
        border-top: 1px solid #b1b1b1;
        border-bottom: 1px solid #b1b1b1;
      }
    }
  }
}

@keyframes open_nav {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}